<!-- 企业挂账/挂账管理页面 -->
<template>
  <div>
    <div class="content-box">
      <div class="left-box">
        <div class="title-box">挂账账户</div>
        <div class="btn-list">
          <div class="btn-item" :class="{ 'btn-item-active': accountTypeActiveIndex === index }" @click="onChangeAccountType(index)" v-for="(item, index) in accountTypeList" :key="item.name + index">
            {{ item.name }}
          </div>
        </div>
        <div class="search-wrap">
          <div class="search-input-box">
            <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
            <input class="input" v-model.trim="pageListQuery.search" type="text" placeholder="搜索挂账账户/联系人/联系电话" @input="onSearch" />
          </div>
        </div>
        <div class="table-list-box">
          <el-table v-loading="loading" element-loading-text="加载中..." :data="payCreditList" @row-click="singleElection" border>
            <el-table-column label="" width="30">
              <template #default="scope">
                <el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="id" label="账户ID" />
            <el-table-column align="center" prop="name" label="账户名称" />
            <el-table-column align="center" prop="total_money_limit" label="信用额度" />
            <el-table-column align="center" prop="pay_price" label="结存金额" />
            <el-table-column align="center" prop="contact_name" label="联系人" />
            <el-table-column align="center" prop="contact_mobile" label="联系电话" />
            <el-table-column align="center" label="子账户数量">
              <template #default="scope">
                <el-link type="primary" @click.stop="toSubPage(scope.row.id)">{{ scope.row.account_count }}</el-link>
              </template>
            </el-table-column>
            <el-table-column align="center" label="新增签单数">
              <template #default="scope">
                <el-link type="success" @click.stop="toAccountBill(scope.row.id)">{{ scope.row.log_count }}</el-link>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="create_time" label="创建时间" />
          </el-table>
        </div>
        <div class="desc-btn-box">
          <div class="desc">
            <Pagination v-show="pageListTotal > 0" :total="pageListTotal" v-model:page="pageListQuery.page" v-model:limit="pageListQuery.limit" @pagination="getCreditList" :pageSizes="[15, 45, 75, 100]" />
          </div>
          <div class="btn-box">
            <div class="btn-item" @click="toSubPage('')">子账户</div>
            <div class="btn-item" @click="handleBack">返回</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { dealAssignDataFunction, debounce } from '@/utils/toolsValidate'
import { creditBillList } from '@/api/pay'
import { useRouter } from 'vue-router'
import Pagination from '@/components/Pagination/Index.vue'

const router = useRouter()

const datetimerangeList = ref([])
const searchKeyword = ref(null)
const accountTypeActiveIndex = ref(0)
const accountTypeList = ref([{ name: '企业账户' }, { name: '担保账户' }])
const payCreditList = ref([])
const loading = ref(false)
const templateSelection = ref('')
const pageListQuery = reactive({ page: 1, limit: 15, type: 1, search: '' })
const pageListTotal = ref(0)

getCreditList()

function singleElection(row) { templateSelection.value = row.id }

function getCreditList() {
  loading.value = true
  creditBillList(pageListQuery).then(res => {
    if (res.status === 200) {
      payCreditList.value = dealAssignDataFunction([], res?.data?.list?.data)
      pageListTotal.value = dealAssignDataFunction(0, res?.data?.list?.total)
      loading.value = false
    }
  }).finally(() => { loading.value = false })
}

const onSearch = debounce(function () { pageListQuery.page = 1; getCreditList() }, 500)

function onChangeAccountType(index) { accountTypeActiveIndex.value = index; pageListQuery.type = index + 1; onSearch() }

function handleBack() { router.back() }

function toSubPage(id) {
  if (!templateSelection.value && !id) { ElMessage.warning('请先选择账户ID'); return }
  router.push({ name: 'SubAccount', query: { org_id: templateSelection.value || id } })
}

function toAccountBill(id) { router.push({ path: '/bill/onAccount', query: { org_id: id } }) }
</script>

<style lang="scss" scoped>
::v-deep { .el-table { border-radius: 12px; } .el-table__body-wrapper { height: 550px; overflow-y: auto; } .el-table__body-wrapper::-webkit-scrollbar { width: 6px !important; height: 0 !important; } .el-table__body-wrapper::-webkit-scrollbar-thumb { height: 200px !important; background: #d2d2d2 !important; border-radius: 3px !important; } .el-table__body-wrapper::-webkit-scrollbar-track { display: none !important; } .el-table th.el-table__cell { background: #a85b62; color: #fff !important; } .el-input__inner { border-radius: 12px; } .el-radio__input.is-checked .el-radio__inner { border-color: #7c0a03; background: #7c0a03; } }
.content-box { display: flex; align-items: flex-start; }
.content-box .left-box { width: 1600px; height: 986px; background: #ffffff; border-radius: 20px; box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16); box-sizing: border-box; }
.content-box .left-box .title-box { display: flex; align-items: center; justify-content: center; height: 88px; background: #f4f4f4; border-radius: 20px 20px 0px 0px; font-size: 20px; font-family: PingFang SC, PingFang SC-Bold; font-weight: 700; text-align: center; color: #333333; }
.content-box .left-box .btn-list { display: flex; align-items: center; padding: 20px 0 0 30px; }
.content-box .left-box .btn-list .btn-item { width: 164px; height: 53px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; line-height: 53px; text-align: center; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; margin-right: 30px; cursor: pointer; }
.content-box .left-box .btn-list .btn-item:last-child { margin-right: 0; }
.content-box .left-box .btn-list .btn-item-active { background: #7c0a03; color: #ffffff; }
.content-box .left-box .table-list-box { padding: 20px 50px 0 50px; }
.content-box .left-box .search-wrap { display: flex; align-items: center; justify-content: flex-end; height: 88px; box-sizing: border-box; padding: 0 30px; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.04); }
.content-box .left-box .search-wrap .search-input-box { width: 350px; height: 46px; border: 1px solid #d2d2d2; border-radius: 25px; box-sizing: border-box; display: flex; align-items: center; padding-left: 20px; }
.content-box .left-box .search-wrap .search-input-box .search-icon { flex-shrink: 0; width: 24px; height: 24px; }
.content-box .left-box .search-wrap .search-input-box .input { border: none; outline: none; width: 240px; font-size: 16px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #333333; margin-left: 10px; }
.content-box .left-box .desc-btn-box { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding-left: 50px; box-sizing: border-box; }
.content-box .left-box .desc-btn-box .desc { font-size: 14px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #333333; }
.content-box .left-box .desc-btn-box .btn-box { display: flex; align-items: center; }
.content-box .left-box .desc-btn-box .btn-box .btn-item { display: inline-block; padding: 0 42px; height: 52px; line-height: 52px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #333333; margin-right: 40px; cursor: pointer; }
.content-box .left-box .desc-btn-box .btn-box .btn-item:hover { color: #7c0a03; border-color: #7c0a03; }
</style>
